import React, { useEffect, useState } from 'react';
import { Modal, message, Form, Input } from 'antd';
import Editor from '../Editor';
import FileUpload from '../FileUpload';
import { handleFileUrl, handleFileid } from '@/utils/utils';
import {savePublicity, updatePublicity } from '@/services/public'

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
};

interface EditorContentProps {
  visible: boolean;
  info?: any;
  onCancel: () => void;
  onSubmit: () => void;
}

const EditorContent: React.FC<EditorContentProps> = ({
  visible,
  info,
  onCancel,
  onSubmit,
}) => {

  let imgs = [];
  if (info) {
    if (info.attachment && info.attachmentUrl) {
      imgs = handleFileUrl(info.attachment, info.attachmentUrl);
      // console.log(imgs);
      // setImg(imgs)
    }
  }

  const [form] = Form.useForm();
  // const [editContents, setEditorContent] = useState<string>();
  const [imgList, setImg] = useState<any[]>(imgs);

  const handleEditorChange = (content: any) => {
    // setTimeout(() => {
    //   setEditorContent(content);
    // }, 1000);
  };

  const handleOkSubmit = async () => {
    const fieldsValue: any = await form.validateFields();
    const par: any = {
      title: fieldsValue.title,
      content: fieldsValue.content,
      type: 4
    }
    if (fieldsValue.attachment) {
      par.attachment = handleFileid(fieldsValue.attachment);
    }
    if (info && info.id) {
      //编辑
      par.id = info.id;
      const res = await updatePublicity(par);
      if (res.success) {
        message.success('发布成功');
        onSubmit();
      } else {
        message.error(res.errMsg || '保存失败')
      }
    } else {
      const res = await savePublicity(par);
      if (res.success) {
        message.success('发布成功');
        onSubmit();
      } else {
        message.error(res.errMsg || '保存失败')
      }
    }
  };

  // useEffect(() => {
  //   if (info) {
  //     if (info.attachment && info.attachmentUrl) {
  //       const imgs = handleFileUrl(info.attachment, info.attachmentUrl);
  //       console.log(imgs);
  //       setImg(imgs)
  //     }
  //   }
  // }, [info])

  return (
    <Modal
      title={'编辑通知'}
      maskClosable={false}
      onCancel={onCancel}
      visible={visible}
      width="900px"
      okText="发布"
      cancelText="取消"
      onOk={handleOkSubmit}
    >
      <Form {...formItemLayout} name="save_project" form={form}>
        <FormItem
          label="标题"
          name="title"
          initialValue={info?.title || ''}
          rules={[{ required: true, message: '请输入标题！' }]}
        >
          <Input placeholder="请输入标题" />
        </FormItem>
        <FormItem label="内容" name="content" rules={[{ required: true, message: '请输入内容！' }]}>
          <Editor defaultValue={info?.content || ''} />
        </FormItem>
        <FormItem label="附件" name="attachment" initialValue={imgList}>
          <FileUpload ossEnum="PROJECT" multiple={true} max={6} type="image/*,.pdf,.doc,.docx" />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default EditorContent;
